<template>
  <view class="cate">
    <!-- 搜索 -->
    <view class="main_header_seach">
      <search></search>
    </view>
    <view class="cate_list">
      <!-- 一级菜单 -->
      <scroll-view class="cate_left_list" scroll-y :style="{height: wh + 'px'}">
        <view :class="['left_item',index === active?'active':'']" v-for="(itme,index) in cateList" :key="cat_id"
          @click="activeChange(index)">
          {{itme.cat_name}}
        </view>
      </scroll-view>
      <!-- 二级菜单 -->
      <scroll-view class="secondary_menu" scroll-y :style="{height: wh + 'px'}" :scroll-top="scrollTop">
        <view class="secondary_menu_title" v-for="(item,index) in cateList[active].children" :key="index">
          <view class="catName">
            <text>/{{item.cat_name}}/</text>
          </view>
          <!-- 三级菜单 -->
          <view class="cate_right_list" enable-flex>
            <view class="right_item" v-for="(n,i1) in item.children" :key="i1" @click="toGoodsList(n)">
              <image class="right_item_image" :src="n.cat_icon" mode=""></image>
              <text class="right_item_text">{{n.cat_name}}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        cateList: [], //分类数据
        active: 0,
        wh: 0,
        // 滚动条距离顶部的距离
        scrollTop: 0
      };
    },
    methods: {
      // 获取分类数据
      async getCateList() {
        const result = await uni.$http.get('/api/public/v1/categories')
        this.cateList = result.data.message
        console.log(result);
      },
      // 点击改变active
      activeChange(index) {
        this.active = index
        // 让 scrollTop 的值在 0 与 1 之间切换
        this.scrollTop = this.scrollTop === 0 ? 1 : 0
      },
      // 点击跳转商品信息
      toGoodsList(n){
        uni.navigateTo({
          url:"/subpkg/goods_list/goods_list?cid=" + n.cat_id
        })
        console.log(111);
      }
    },
    onLoad() {
      // 获取分类数据
      this.getCateList()
      // 获取当前系统的信息
      const sysInfo = uni.getSystemInfoSync()
      // 为 wh 窗口可用高度动态赋值
      this.wh = sysInfo.windowHeight
    }
  }
</script>

<style lang="scss">
  .cate {
    width: 100%;
    height: 100%;

    .cate_list {
      display: flex;
      border: 1rpx solid red;

      .secondary_menu {
        width: 100%;

        .secondary_menu_title {
          .catName {
            height: 120rpx;
            line-height: 120rpx;
            background-color: white;

          }

          width: 100%;
          // height: 120rpx;
          // line-height: 120rpx;
          text-align: center;

          text {
            font-weight: bold;
          }
        }
      }

      .cate_left_list {
        background-color: #f7f7f7;
        // border: 1rpx solid yellow;
        width: 40%;
        // height: 100%;
        text-align: center;

        .left_item {
          width: 100%;
          height: 120rpx;
          line-height: 120rpx;
        }

      }

      .active {
        background-color: #ffffff;
        position: relative;

        &::before {
          content: '';
          display: block;
          width: 6rpx;
          height: 60rpx;
          background-color: #c00000;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }

      .cate_right_list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0rpx 20rpx;
        background-color: white;
        // border: 1rpx solid green;

        .right_item {
          // border: 1px solid aqua;
          width: 30%;
          height: 200rpx;
          margin-bottom: 35rpx;

          .right_item_image {
            width: 100%;
            height: 75%;
          }

          .right_item_text {
            font-size: 28rpx;
            font-weight: 500;
          }
        }
      }
    }
  }
</style>